<script setup>
import { ref, watchEffect } from "vue";
import Dialog from "../../../../components/Dialog.vue";
import * as echarts from "echarts";

const props = defineProps(["visible", "title", "xData", "data", "dialogStyle"]);

const emits = defineEmits(["close"]);

const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);
  const barWidth = 30;
  const showBarNum = 8;
  const option = {
    tooltip: {
      confine: true,
      extraCssText:
        "background: rgba(7,68,124,0.5);border: 1px solid #2D80FF;border-radius: 4px;padding: 4px 10px;box-sizing: border-box;",
      formatter: function (param) {
        return (
          `<span style='color:#fff;font-size:12px'>${param.name}</span>` +
          `<div style=" width: 100%;border: 1px solid;border-image: linear-gradient(rgba(0, 178, 238, 0),rgba(0, 178, 238, 0.5),rgba(0, 178, 238, 0))1 1;}"></div>` +
          `<span style='color: #4BFFF5;font-size: 16px;font-weight: bold;'>
            ${param.value}${props.yUnit || ""}<span>`
        );
      },
    },
    dataZoom: [
      {
        show: false,
        height: 10,
        type: "slider",
        orient: "horizontal",
        xAxisIndex: 0,
        zoomLock: false,
        handleSize: "100%",
        showDetail: false,
        start: 0,
        //  end: props.data.length > showBarNum ? ( ( parseInt(showBarNum - 1 ) / props.data.length ) * 100 ).toFixed( 0 ) : 100,
        end: 100,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleStyle: {
          color: "#d3dee5",
        },
        // 去掉边框颜色
        borderColor: "transparent",
        showDataShadow: true,
        moveHandleSize: 0,
      },
      {
        type: "inside",
        id: "insideY",
        xAxisIndex: 0,
        // start: 0,
        // end: 50,
        startValue: 0,
        endValue: showBarNum,
        handleSize: 0,
        zoomOnMouseWheel: false,
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
      },
    ],
    grid: {
      top: 10,
      left: 0,
      bottom: 5,
      right: 10,
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: props.xData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        textStyle: {
          fontSize: 14,
          color: "rgba(201, 233, 248, 0.60)",
        },
        formatter: (value) => {
          // 将标签文本每六个字分为一行
          var formattedValue = "";
          for (var i = 0; i < value.length; i += 6) {
            formattedValue += value.substring(i, i + 6) + "\n";
          }
          return formattedValue;
        },
      },
      axisLine: {
        lineStyle: {
          color: "#3D4985",
        },
      },
    },
    yAxis: [
      {
        max: function (value) {
          return value.max > 10
            ? Math.floor(parseFloat(value.max) + parseFloat(value.max) * 0.2)
            : value.max + 1;
        },
        name: "",
        type: "value",
        axisTick: { show: false },
        axisLabel: {
          show: true,
          textStyle: { color: "rgba(201, 233, 248, 0.60)" },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3D4985",
            fontSize: "12px",
            fontWeight: 400,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#3D4985",
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        data: props.data,
        barWidth: barWidth,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(45, 255, 248, 0.80)",
              },
              {
                offset: 0,
                color: "rgba(45, 255, 248, 0.10)",
              },
            ],
          },
          borderRadius: 0,
        },
        label: {
          show: true,
          position: "top",
          color: "#FFFFFF",
          fontSize: 12,
          fontWeight: "bold",
          // formatter: '{c}',
          formatter: (params) => `${params.value}${props.percentage || ""}`,
        },
      },

      // 柱体顶点
      {
        type: "scatter",
        name: "top",
        yAxisIndex: 0,
        data: props.data,
        symbol: "rect",
        symbolSize: [barWidth, 4],
        itemStyle: {
          color: "#2dfcf7",
        },
        hoverAnimation: false,
        silent: true,
        symbolOffset: ["0", "1"], // 位置
      },
    ],
  };

  if (props.data.length > showBarNum) {
    option.dataZoom[0].show = false;
  } else {
    option.dataZoom[0].show = false;
  }
  chart.setOption(option);
});
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    :dialogStyle="props.dialogStyle"
    @close="emits('close')"
  >
    <div class="box">
      <div ref="chartRef" style="width: 100%; height: 100%"></div>
    </div>
  </Dialog>
</template>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}
</style>
